<template>
    <el-main>
        <el-row :gutter="20">
            <el-col :span="7" class="mian-aside">
                <customer :keys="keys"></customer>
            </el-col>
            <el-col :span="17">
                <el-card class="box-card" style="min-height: 200px;">
                    <el-row v-for="item in questionListData" :key="item.id" class="question-box" style="border-bottom: #c0c4cc 1px solid;color: #606266;font-size: 14px;">
                        <el-col :span="17">
                            <div class="title-cusor" @click="showDetail(item.id, item.user_id)">
                                <el-tag>{{item.topic}}</el-tag>
                                <span>{{item.title}}</span><span v-if="item.lead !==''"> - {{item.lead}}</span>
                            </div>
                        </el-col>
                        <el-col :span="7" style="text-align: right;">
                            <el-tag><i class="el-icon-star-on"></i>{{item.favourite_count}}</el-tag>
                            <el-divider direction="vertical"></el-divider>
                            <el-tooltip class="item" effect="light" :content="`关注(${item.followers_count}) / 评论(${item.answers_count}) / 喜欢(${item.favourite_count}) / 阅读(${item.read_count}) / 创建于：${item.created_at}`" placement="bottom">
                                <span>{{item.timeShow}}</span>
                            </el-tooltip>
                        </el-col>
                        <div>
                            <span style="display: inline-block;padding-top: 20px;">
                                <label style="color: #303133;">评论状态</label>
                                <el-switch v-model="item.close_comment === 1 ? true : false" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                                &nbsp;&nbsp;
                                <label style="color: #303133;">游客状态</label>
                                <el-switch v-model="item.is_guest_view === 1 ? true : false" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
                            </span>
                            <span style="display: inline-block;padding-top: 15px;float: right;">
                                <el-button @click="Qedit(item)" size="mini" type="primary" icon="el-icon-edit" circle></el-button>
                                <el-button @click="Qremove(item)" size="mini" type="danger" icon="el-icon-delete" circle></el-button>
                            </span>
                        </div>
                    </el-row>
                    <avue-empty v-if="questionListData.length === 0" desc="您还没有创建任何讨论话题">
                        <el-button @click="goCrd" type="success" round><i class="el-icon-chat-round"></i> 发起讨论</el-button>
                    </avue-empty>
                    <el-pagination
                        @current-change="handleCurrentChange"
                        :hide-on-single-page=true
                        prev-text="上一页"
                        next-text="下一页"
                        :current-page="page.currentPage"
                        :page-size="page.pageSize"
                        :page-count="page.total"
                        :total="page.total">
                    </el-pagination>
                </el-card>
            </el-col>
        </el-row>
    </el-main>
</template>

<script>
    import customer from '../../../components/customer'
    export default {
        data() {
            return {
                keys: 'discuss',
                questionListData: [],
                page: {
                    currentPage: 1,
                    total: 0,
                    pageSize: 10
                },
            }
        },
        components: {
            customer
        },
        created() {
            this.getListQuestion()
        },
        methods: {
            handleCurrentChange (currentPage) {
                this.page.currentPage = currentPage
                this.getListQuestion()
            },
            goCrd() {
                this.$router.push({path: "/customer/discussCrd"})
            },
            showDetail(question_id, user_id) {
                this.$router.push({path: `/question/${question_id}/${user_id}`})
            },
            Qedit(item) {
                this.$router.push({path: `/customer/questionEdt/${item.id}`})
            },
            Qremove(item) {
                // 删除
                const params = {
                    id: item.id
                }
                var _this = this
                _this.$confirm('是否确认删除#' + item.title, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(function() {
                    _this.axios.post(_this.$API.ZHIHUAPI.removeQustion, _this.qs.stringify(params)).then((res) => {
                        res = res.data
                        if (res.code === 10000) {
                            _this.$message({
                                showClose: false,
                                message: res.message,
                                type: 'success'
                            })
                            _this.getListQuestion()
                        } else {
                            _this.$message({
                                showClose: false,
                                message: res.message,
                                type: 'error'
                            })
                        }
                    }).catch(() => {})
                }).catch(() => {})
            },
            getListQuestion() {
                const _this = this
                const params = {
                    key: _this.keys,
                    page: _this.page.currentPage,
                    limit: _this.page.pageSize,
                }
                _this.axios.post(_this.$API.ZHIHUAPI.listQuestion, _this.qs.stringify(params)).then((res) => {
                    res = res.data
                    if (res.code === 10000) {
                        if (res.hasOwnProperty('data') && Object.keys(res.data).length > 0) {
                            _this.questionListData = res.data.list
                            _this.page.total = res.data.count
                        } else {
                            _this.questionListData = []
                            _this.page.total = 0
                        }
                    } else {
                        _this.$message({
                            showClose: false,
                            message: res.message,
                            type: 'error'
                        })
                        _this.questionListData = []
                        _this.page.total = 0
                    }
                }).catch(() => {
                    _this.$message({
                        showClose: false,
                        message: '网络连接失败，请重试！',
                        type: 'error'
                    })
                    _this.questionListData = []
                    _this.page.total = 0
                })
            },
        }
    }
</script>

<style>
    .el-tag {
        background-color: #ecf5ff;
        border-color: #d9ecff;
        display: inline-block;
        height: 25px;
        padding: 0 10px;
        line-height: 22px;
        font-size: 12px;
        color: #409EFF;
        border-width: 1px;
        border-style: solid;
        border-radius: 4px;
        box-sizing: border-box;
        white-space: nowrap;
    }
    .title-cusor {
        cursor: pointer;
    }
    .title-cusor:hover {
        color: #409EFF;
    }
</style>
